import React, { Component } from "react";
import { getShopDetail, getCarShop } from "../api/index";
import { Icon } from "react-vant";
import { ActionBar } from "react-vant";

export default class shopDetail extends Component {
  state = {
    DetailData: {},
    id: "",
  };
  componentDidMount() {
    this.state.id = this.props.location.state.data.id;
    console.log(this.state.id);
    getShopDetail({ id: this.state.id }).then((res) => {
      console.log(res);
      this.setState({
        DetailData: res.data.data,
      });
    });
  }

  //返回上一级
  goBack() {
    this.props.history.push("/home/shop");
  }

  //跳转到购物车
  goCar() {
    this.props.history.push("/car");
  }

  //加入购物车
  AddShop(item) {
    getCarShop({
      img: item.img,
      title: item.title,
      info: item.info,
      price: item.price,
      num: item.num,
      id: item.id,
    }).then((res) => {
      console.log(res);
    });
  }
  render() {
    const { DetailData } = this.state;
    return (
      <div className="shopDetail">
        <div className="header">
          <Icon
            name="arrow-left"
            size="20"
            onClick={() => {
              this.goBack();
            }}
          />
          <div>商品详情</div>
          <span></span>
        </div>
        <div className="content">
          <img src={DetailData.img} alt="" />
          <div className="price">
            <p>{DetailData.title}</p>
            <p>￥{DetailData.price}</p>
          </div>
          <p className="info">规格：{DetailData.specification}</p>
          <p className="info">剂型：{DetailData.dosage}</p>
          <p className="info">有效期：{DetailData.validity}</p>
          <p className="info">商品介绍：{DetailData.info}</p>
        </div>
        <ActionBar>
          <ActionBar.Icon icon="chat-o" text="客服" />
          <ActionBar.Icon
            icon="cart-o"
            text="购物车"
            onClick={() => this.goCar()}
          />
          <ActionBar.Icon icon="star" text="店铺" />
          <ActionBar.Button
            type="warning"
            text="加入购物车"
            onClick={() => {
              this.AddShop(DetailData);
            }}
          />
          <ActionBar.Button type="danger" text="立即购买" />
        </ActionBar>
      </div>
    );
  }
}
